<template>
	<!-- 自定义导航栏 -->
	<view class="navigation"
		:style="{ background: boxBackground ? 'transparent' : isCrowd ? '#FFFFFF' : 'none', backgroundImage: !isShowBg && !isCrowd ? 'url(/static/img/bg.png)' : 'none', }">
		<!-- 安全位置 -->
		<view class="bartop" :style="{ height: statusBarHeight + 'px' }" />
		<!--导航栏内容 -->
		<view class="navbox flexcent" :style="{ color: isCrowd ? '#434343' : '#FFFFFF' }">
			<!-- 返回按钮 -->
			<view @click="toback" v-if="isback" class="iconfont icon-fanhui" />
			<slot name='nav'></slot>
		</view>
	</view>
</template>

<script>
export default {
	//  组件的属性列表
	props: {
		isback: { //是否显示返回按钮,默认不显示
			type: Boolean,
			value: false
		},
		path: { //跳转路径地址，不传则默认返回上一步
			type: String
		},
		isShowBg: {
			type: Boolean,
			value: true
		},
		isCrowd: {
			type: Boolean,
			value: false
		},
		boxBackground: {
			type: [String],
			default: ''
		},
	},
	data() {
		return {
			statusBarHeight: 0, //安全高度
		}
	},
	created() {
		// 获取安全高度
		this.barheihgt()
	},
	//  组件的方法列表
	methods: {
		// 获取安全高度
		async barheihgt() {
			// 获取设备高度信息
			const device = await this.rest.select('device');
			this.statusBarHeight = device.statusBarHeight
		},
		// 返回上一级
		toback() {
			// 先执行用一次，之后隔多久执行一次
			this.way.throttle(500).then(() => {
				if (!this.path) {
					this.rest.jump('bck', 1)
				} else {
					this.rest.jump('rdt', this.path)
				}
			});

		}
	}
}
</script>

<style lang="less" scoped>
/* 导航栏内容 */
.navigation {
	background-image: url('/static/img/bg.png');

	.bartop {
		height: 20px;
	}

	.navbox {
		height: 44px;
		font-size: 32rpx;
		color: #FFFFFF;
		position: relative;

		.icon-fanhui {
			position: absolute;
			left: 35rpx;
			font-size: 32rpx;
		}
	}


}
</style>